<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="fy-alert/css/fy-alert.css">
    <title>Document</title>
    <style type="text/css">
    	.title{
    		position: relative;
    		border-bottom:1px solid #999;
    		color:#333;
    		font-size:18px;
    		padding-bottom:5px;
    	}
    
    	button{
    		padding:7px 15px;
    		background-color: #fff;
    		border:1px solid #aaa;
    		border-radius: 3px;
    	}
    	.fyAlert-blue .fy-alert-header{
    		background-color: #7272da;
    		color:#fff;
    	}
    	.fyAlert-blue .fy-alert-btn{
    		background-color: #7272da;
    		border:0;
    		color:#fff;
    	}
    	.fyAlert-green .fy-alert-header{
    		background-color: #95d495;
    		color:#fff;
    	}
    	.fyAlert-green .fy-alert-btn{
    		background-color: #95d495;
    		border:0;
    		color:#fff;
    	}

    	/*自定义动画案例*/
    	@-webkit-keyframes lightSpeedIn {
		  from {
		    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
		    transform: translate3d(100%, 0, 0) skewX(-30deg);
		    opacity: 0;
		  }

		  60% {
		    -webkit-transform: skewX(20deg);
		    transform: skewX(20deg);
		    opacity: 1;
		  }

		  80% {
		    -webkit-transform: skewX(-5deg);
		    transform: skewX(-5deg);
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}

		@keyframes lightSpeedIn {
		  from {
		    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
		    transform: translate3d(100%, 0, 0) skewX(-30deg);
		    opacity: 0;
		  }

		  60% {
		    -webkit-transform: skewX(20deg);
		    transform: skewX(20deg);
		    opacity: 1;
		  }

		  80% {
		    -webkit-transform: skewX(-5deg);
		    transform: skewX(-5deg);
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}

		.lightSpeedIn {
		  -webkit-animation-name: lightSpeedIn;
		  animation-name: lightSpeedIn;
		  -webkit-animation-timing-function: ease-out;
		  animation-timing-function: ease-out;
		}

		@-webkit-keyframes lightSpeedIn_hide {
		  from {
		    opacity: 1;
		  }

		  to {
		    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
		    transform: translate3d(100%, 0, 0) skewX(30deg);
		    opacity: 0;
		  }
		}

		@keyframes lightSpeedIn_hide {
		  from {
		    opacity: 1;
		  }

		  to {
		    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
		    transform: translate3d(100%, 0, 0) skewX(30deg);
		    opacity: 0;
		  }
		}

		.lightSpeedIn_hide {
		  -webkit-animation-name: lightSpeedIn_hide;
		  animation-name: lightSpeedIn_hide;
		  -webkit-animation-timing-function: ease-in;
		  animation-timing-function: ease-in;
		}

		.pre-box{
			border:1px solid #aaa;
			border-radius: 5px;
			background-color: #f9f9f9;
			padding:15px;
		}
    </style>
</head>
<body>
	<h2 class="title">参数配置</h2>
	<pre class="pre-box">    title    :'提示', //标题
    icon     : '',
    content  : '',    //内容
    skin     : '',    //皮肤
    position : 'fixed',//定位方式
    closeBtn : true,   //是否显示关闭按钮
    type     : 1,      //type=2 为iframe
    drag     : false,   //是否开启拖动
    time     : 2000,   //当无头或无底部按钮时自动关闭时间
    shadow   : [0.3,'#000'], //遮罩
    shadowClose : true,  //是否点击遮罩关闭
    animateType : 0, // 0为默认动画 1为底部弹出 2为顶部弹出 3为左部弹出 4为右部弹出
    aniExtend: '',   //例 css动画名 opacity
    area     : ['auto','auto'], //设置宽高
    minmax   : false,
    direction: ['center','center'], //方向 key1:right left center  key2: top bottom center
    btns     : {                   //按钮组
       /* '确定' : function(){},*/
    },
    success  : function(){},  //弹出后回调
    end      : function(){}   //关闭后回调
	</pre>

    <div id="contentText" style="display: none">商量的国剧盛典路径规划落实到哪个好老师大家回顾历史大家</div>
    <h2 class="title">信息提示弹出层（图标）</h2>
	<button onclick="demo1()">成功弹框</button>
	<button onclick="demo2()">警告弹框</button>
	<button onclick="demo3()">失败弹框</button>
	<button onclick="demo4()">加载1弹框</button>
	<button onclick="demo5()">加载2弹框</button>

	<h2 class="title">内容提示弹出层</h2>
	<button onclick="content1()">文本提示框</button>
	<button onclick="content2()">DOM提示框</button>
	<button onclick="content3()">IFRAME提示框</button>

	 <h2 class="title">方向弹出层</h2>
	<button onclick="bottomFun()">贴底部下弹出层</button>
	<button onclick="topFun()">贴顶部上弹出层</button>
	<button onclick="leftFun()">贴左部左弹出层</button>
	<button onclick="rightFun()">贴右部右弹出层</button>

	<h2 class="title">其他参数弹出层</h2>
	<button onclick="drag()">可拖动弹出层</button>
	<button onclick="aniExtend()">自定义弹出动画</button>
	<button onclick="minmaxScreen()">开启全屏按钮</button>
	<button onclick="skin()">开启其他风格</button>
	<button onclick="addMesk()">层上层弹框</button>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="fy-alert/js/fy-alert.js"></script>
<script type="text/javascript">

		//信息提示弹出层（图标）
        function demo1(){ fyAlert.msg("下方弹出弹框",{icon:1,animateType:1} )};
        function demo2(){ fyAlert.msg("上方弹出弹框",{icon:2,animateType:2} )};
        function demo3(){ fyAlert.msg("左方弹出弹框",{icon:3,animateType:3} )};
        function demo4(){ fyAlert.msg("右方弹出弹框",{icon:4,animateType:4} )};
        function demo5(){ fyAlert.msg("右方弹出弹框",{icon:5,animateType:4} )};

        
        //内容提示弹出层
        function content1(){ 
        	fyAlert.alert({
        		title:'文本提示框',
        		content: '您觉得这个这个弹框动画怎么样',
        		btns    : {                  //按钮组
	                '很好' : function(obj){
	                    obj.destory();   //在页面上
	                    demo1();
	                },
	                '不好' : function(obj){
	                    obj.destory(); //销毁
	                    demo1();
	                }
	            },
        	}) 
        }
        function content2(){ 
        	fyAlert.alert({
        		title:'DOM提示框',
        		// area : ['250px','auto'],
        		content: $("#contentText"),
        		btns    : {                  //按钮组
                '很好' : function(obj){
                    obj.destory();   //在页面上
                    demo1();
                },
                '不好' : function(obj){
                    obj.destory(); //销毁
                    demo1();
                }
            },
        	}) 
        }
        function content3(){ 
        	fyAlert.alert({
        		type:2,
        		title:'文本提示框',
        		animateType : 1,
        		area : ['380px','90%'],
        		content: 'https://www.baidu.com',
        		btns    : {                  //按钮组
                '很好' : function(obj){
                    obj.destory();   //在页面上
                    demo1();
                },
                '不好' : function(obj){
                    obj.destory(); //销毁
                    demo1();
                }
            },
        	}) 
        }


        //方向弹出层
        function bottomFun(){ 
        	fyAlert.alert({
        		type:2,
        		minmax:true,
        		animateType : 1,
        		direction:['center','bottom'],
        		area : ['100%','50%'],
        		content: 'https://www.baidu.com',
        	}) 
        }
        function topFun(){ 
        	fyAlert.alert({
        		type:2,
        		minmax:true,
        		animateType : 2,
        		direction:['center','top'],
        		area : ['100%','50%'],
        		content: 'https://www.baidu.com',
        	}) 
        }
        function leftFun(){ 
        	fyAlert.alert({
        		type:2,
        		minmax:true,
        		animateType : 3,
        		direction:['left','top'],
        		area : ['400px','100%'],
        		content: 'https://www.baidu.com',
        	}) 
        }
        function rightFun(){ 
        	fyAlert.alert({
        		type:2,
        		minmax:true,
        		animateType : 4,
        		direction:['right','top'],
        		area : ['400px','100%'],
        		content: 'https://www.baidu.com',
        	}) 
        }


        //可拖动弹出层
        function drag(){ 
        	fyAlert.alert({
	        	title   : "点击拖动",
	        	drag    : true,
	        	content : '您如何看待开发人员',
	        	btns    : {                  //按钮组
	                '确定' : function(obj){
	                    obj.destory();   //在页面上
	                    demo1();
	                },
	                '取消' : function(obj){
	                    obj.destory(); //销毁
	                    demo2();
	                }
	            },
	        }) 
	    }

	    //自定义弹出层动画
        function aniExtend(){
            fyAlert.alert({
	        	title   : "自定义弹出动画",
	        	aniExtend:'lightSpeedIn',
	        	content : '自定义弹出动画，隐藏动画添加_hide <p>例:显示动画为 opaicty;隐藏动画就为 opacity_hide</p> ',
	        	btns    : {                  //按钮组
	                '确定' : function(obj){
	                    obj.destory();   //在页面上
	                    demo1();
	                },
	                '取消' : function(obj){
	                    obj.destory(); //销毁
	                    demo2();
	                }
	            },
	        }) 
        }

        //开启全屏按钮
        function minmaxScreen(){
        	fyAlert.alert({
        		minmax   : true,
                content  : '点击确定关闭弹框...',//$("#contentText"),    //内容
                btns     : {                  //按钮组
	                '确定' : function(obj){
	                    obj.destory();   //在页面上
	                }
                }
            })
        }


        //另一种风格
        function skin(){
        	fyAlert.alert({
             	closeBtn : false,
             	skin     : 'fyAlert-blue',
                content  : '点击确定关闭弹框，怎么样好看吧...',//$("#contentText"),    //内容
                btns     : {                  //按钮组
	                '确定' : function(obj){
	                    obj.destory();   //在页面上
	                    skin2();
	                }
                }
            })
        }

        //另一种风格
        function skin2(){
        	fyAlert.alert({
             	closeBtn : true,
             	skin     : 'fyAlert-green',
                content  : '点击右上角关闭弹框，怎么样好看吧...',//$("#contentText"),    //内容
                btns     : {                  //按钮组
	                '确定' : function(obj){
	                    obj.destory();   //在页面上
	                    skin();
	                }
                }
            })
        }

        function addMesk(){
            fyAlert.alert({
                minmax   : true,
                type     : 1,
                area     : ['450px','80%'],
                content  : '<div>寄过来送过来人生酒馆老人家管理局商量个事据了解厉害个人理解过来诗歌朗诵几个老师井冈山路老师给老师干活了施工临时 <button onclick="skin()">弹出框提示</button> </div>',//$("#contentText"),    //内容
                btns     : {                  //按钮组
                    '确定' : function(obj){
                    	console.log(obj);
                        obj.destory();   //在页面上
                    },
                    '取消' : function(obj){
                        obj.destory(); //销毁
                    }
                }     
            })
        }

       



</script>
</body>
</html>